﻿@using Lanbt.Core.Entity.Dto.quartz;
@using Lanbt.Core.Utility.Extent;

@{
    ViewData["Title"] = "QuartzList";
    Layout = "~/Views/_ViewImports.cshtml";
}
<script src="~/js/quartz/quartzlist.js"></script>

<table id="lanbt_table" lay-filter="lanbt_table"></table>

@*头部工具栏*@
<script type="text/html" id="heard_tool">
     <div class="layui-row layui-col-space15">
      <div class="layui-col-md2">
        <input type="text" id="s_name" name="name" placeholder="任务名" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-col-md2">
        <input type="text" id="s_group" name="group" placeholder="任务组" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-col-md3">
        <a class="layui-btn layui-btn-sm power-show" lay-event="search" title="搜索" lay-menu-code="QuartzAction:QueryJobDetailList,QuartzAction:GetJobDetail" ><i class="layui-icon layui-icon-search" /></a>
        <a class="layui-btn layui-btn-sm power-show" lay-menu-code="QuartzAction:InsertJob" lay-event="add" title="添加" ><i class="layui-icon layui-icon-addition" /></a>
      </div>
    </div>
</script>

@*行工具栏*@
<script type="text/html" id="line_tool">
    <a class="layui-btn layui-btn-xs power-show" lay-event="edit" title="编辑" lay-menu-code="QuartzAction:UpdateJob" ><i class="layui-icon layui-icon-edit" /></a>
    <a class="layui-btn layui-btn-xs power-show" lay-event="delete" title="删除" lay-menu-code="QuartzAction:DeleteJob" ><i class="layui-icon layui-icon-delete" /></a>
    {{# if(d.displayState == "正常"){ }}
        <a class="layui-btn layui-btn-xs power-show" lay-event="stop" title="暂停" lay-menu-code="QuartzAction:PauseJob" ><i class="layui-icon layui-icon-pause" /></a>
    {{# }else{ }}
        <a class="layui-btn layui-btn-xs power-show" lay-event="recovery" title="恢复" lay-menu-code="QuartzAction:ResumeJob" ><i class="layui-icon layui-icon-play" /></a>
    {{# } }}
    <a class="layui-btn layui-btn-xs power-show" lay-event="readlog" title="查看日志" lay-menu-code="QuartzAction:QueryLogList" ><i class="layui-icon layui-icon-form" /></a>
</script>

@*quartz操作窗*@
<template id="quartz_operation">
    <style>
        .layui-form-label {
            width: 120px !important;
        }

        .layui-input-block {
            margin-left: 120px !important;
        }
    </style>
    <ul class="layui-form layui-form-pane" lay-filter="form" style="width:90%;margin:10px auto;">
        <li class="layui-form-item">
            <label class="layui-form-label">任务名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
            </div>
        </li>
        <li class="layui-form-item">
            <label class="layui-form-label">任务组：</label>
            <div class="layui-input-block">
                <input type="text" name="group" lay-verify="required" placeholder="请输入任务组" autocomplete="off" class="layui-input">
            </div>
        </li>
        <li class="layui-form-item">
            <label class="layui-form-label">开始时间：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="startTime" name="startTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off">
            </div>
        </li>
        <li class="layui-form-item">
            <label class="layui-form-label">结束时间：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="endTime" name="endTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off">
            </div>
        </li>
        <li class="layui-form-item">
            <label class="layui-form-label">触发器类型：</label>
            <div class="layui-input-block">
                <select id="triggerType" name="triggerType" lay-verify="" lay-filter="triggerType">
                    <option value="" selected>请选择触发器类型</option>
                    <option value="1">Cron</option>
                    <option value="2">Simple</option>
                </select>
            </div>
        </li>

        <li class="layui-form-item lanbt-li-cron" hidden>
            <label class="layui-form-label">Cron：</label>
            <div class="layui-input-inline" style="width: 70%;">
                <input type="text" name="cronValue" lay-verify="cron_verify" placeholder="请输入Cron" autocomplete="off" class="layui-input">
            </div>
            <a class="layui-form-mid layui-word-aux" href="https://www.bejson.com/othertools/cron/" target="_blank">参考</a>
        </li>
        <li class="layui-form-item lanbt-li-simple" hidden>
            <label class="layui-form-label"><i class="layui-icon layui-icon-tips lanbt-tips" title="若方法耗时过长建议设置间隔时间大于耗时时间" style="color:red"></i>间隔时间：</label>
            <div class="layui-input-block">
                <input type="text" name="intervalTime" lay-verify="intervaltime_verify" placeholder="请输入间隔时间（单位:s）" autocomplete="off" class="layui-input">
            </div>
        </li>
        <li class="layui-form-item lanbt-li-simple" hidden>
            <label class="layui-form-label"><i class="layui-icon layui-icon-tips lanbt-tips" title="注意：若【方法耗时时间×执行次数 > 间隔时间】任务容易出现异常，导致任务丢失" style="color:red"></i>执行次数：</label>
            <div class="layui-input-block">
                <input type="text" name="intervalCount" placeholder="请输入执行次数" autocomplete="off" class="layui-input">
            </div>
        </li>

        <li class="layui-form-item">
            <label class="layui-form-label">任务类型：</label>
            <div class="layui-input-block">
                <select id="jobType" name="jobType" lay-filter="jobType">
                    <option value="" selected>请选择任务类型</option>
                    <option value="1">API</option>
                    <option value="2">邮箱</option>
                </select>
            </div>
        </li>
        <li class="layui-form-item lanbt-li-api" hidden>
            <label class="layui-form-label">调用方式：</label>
            <div class="layui-input-block">
                <input type="radio" name="apiHttpMethod" value="1" title="GET" checked>
                <input type="radio" name="apiHttpMethod" value="2" title="POST">
                <input type="radio" name="apiHttpMethod" value="3" title="PUT">
                <input type="radio" name="apiHttpMethod" value="4" title="DELETE">
            </div>
        </li>
        <li class="layui-form-item lanbt-li-api" hidden>
            <label class="layui-form-label">调用地址：</label>
            <div class="layui-input-block">
                <input type="text" name="apiUrl" lay-verify="api_url_verify" placeholder="url" autocomplete="off" class="layui-input">
            </div>
        </li>
        <li class="layui-form-item lanbt-li-api" hidden>
            <label class="layui-form-label">Head：</label>
            <div class="layui-input-block">
                <textarea type="text" name="head" placeholder="请求头部（JSON格式）" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </li>
        <li class="layui-form-item lanbt-li-api" hidden>
            <label class="layui-form-label">body：</label>
            <div class="layui-input-block">
                <textarea type="text" name="formBody" placeholder="query body 参数，请求方式为（post、put时有效）" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </li>

        <li class="layui-form-item lanbt-li-mail" hidden>
            <label class="layui-form-label">邮箱：</label>
            <div class="layui-input-block">
                <input type="text" name="receiveEmails" lay-verify="mail_required" placeholder="收件邮箱（多个英文逗号【,】隔开）" autocomplete="off" class="layui-input">
            </div>
        </li>
        <li class="layui-form-item lanbt-li-mail" hidden>
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="mail_required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </li>
        <li class="layui-form-item lanbt-li-mail" hidden>
            <label class="layui-form-label">内容：</label>
            <div class="layui-input-block">
                <textarea type="text" name="content" lay-verify="mail_required" placeholder="请输入内容" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </li>

        <li class="layui-form-item">
            <label class="layui-form-label">说明：</label>
            <div class="layui-input-block">
                <textarea type="text" name="description" placeholder="任务说明" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </li>
        <li class="layui-form-item">
            <label class="layui-form-label">邮箱通知：</label>
            <div class="layui-input-block">
                <input type="radio" name="mailNotice" value="0" title="不通知" checked>
                <input type="radio" name="mailNotice" value="1" title="通知异常">
                <input type="radio" name="mailNotice" value="2" title="通知警告">
                <input type="radio" name="mailNotice" value="3" title="通知异常和警告">
                <input type="radio" name="mailNotice" value="4" title="通知所有">
            </div>
        </li>
        <li class="layui-form-item" style="text-align:center">
            <button type="submit" class="layui-btn" lay-submit lay-filter="save">保存</button>
        </li>
    </ul>


    <script>
        layui.use(['laydate','form'], function () {
            var laydate = layui.laydate
            ,form = layui.form
            , $ = layui.$;

            //渲染表单选择框
            form.render();

            var startTime = laydate.render({
                elem: '#startTime'
                , lang: 'zh'
                , type: 'datetime'
            })

            var endTime = laydate.render({
                elem: '#endTime'
                , lang: 'zh'
                , type: 'datetime'
            })

            //触发器类型选择器触发
            form.on('select(triggerType)', function (data) {
                if (data.value == '1') {
                    $(".lanbt-li-cron").show();
                    $('.lanbt-li-simple').hide();
                }
                else if (data.value == '2') {
                    $(".lanbt-li-cron").hide();
                    $('.lanbt-li-simple').show();
                }
                else{
                    $(".lanbt-li-cron").hide();
                    $('.lanbt-li-simple').hide();
                }
            })

            //任务类型选择器触发
            form.on('select(jobType)', function (data) {
                if (data.value == '1') {
                    $(".lanbt-li-api").show();
                    $(".lanbt-li-mail").hide();
                }
                else if (data.value == '2') {
                    $(".lanbt-li-api").hide();
                    $(".lanbt-li-mail").show();
                }
                else {
                    $(".lanbt-li-api").hide();
                    $(".lanbt-li-mail").hide();
                }
            })

            //模型验证
            form.verify({
                //cron 验证
                cron_verify:function(value,itme){ //value：表单的值、item：表单的DOM对象
                    var trigger = $("#triggerType").val();
                    if (trigger == "1" && (value == null || value.length == 0)) {
                        return '请输入Cron表达式';
                    }
                }
                //间隔时间
                , intervaltime_verify:function(value,itme){
                    var trigger = $("#triggerType").val();
                    if (trigger == "2") {
                        if(value == null){
                            return '请输入间隔时间';
                        }
                        if(value <= 0 ){
                            return "间隔时间必须大于0"
                        }
                    }
                }
                //api地址验证
                , api_url_verify:function(value,item){
                    var job_type = $('#jobType').val();
                    if (job_type == "1"){
                        if (value == null || value.length == 0){
                            return "api地址不能为空";
                        }
                        if (!/^(http:\/\/|https:\/\/).*/.test(value)){
                            return "api路径不合法";
                        }
                    }
                }
                //邮箱必填验证
                , mail_required:function(value,item){
                    var job_type = $("#jobType").val();
                    if(job_type == "2"){
                        if(!value){
                            return '不能为空';
                        }
                        if ($(item).attr('name') == "receiveEmails"){
                            value = value.replace('，',',');
                            let str = [];
                            value.split(',').forEach(function (val, i) {
                                if (val && !/^([a-zA-Z0-9_-])+@@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-])+/.test(val)){
                                    str.push(val)
                                }
                            })
                            if(str.length > 0){
                                return '【' + str.toString() + '】邮箱格式不正确';
                            }
                        }
                    }
                }
            });
        })
    </script>
</template>